import { Component } from "react";
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import 'katex/dist/katex.min.css';

export default
class MDRenderer extends Component {
  render(){
    return (
      <ReactMarkdown
      children={ this.props.Text }
      remarkPlugins={[remarkMath, remarkGfm]}
      rehypePlugins={[rehypeKatex, rehypeRaw ,rehypeStringify]}
      components={{
        code({node, inline, className, children, ...props}) {
          const match = /language-(\w+)/.exec(className || '')
          // console.log(inline);
          return !inline && match ? (
            <SyntaxHighlighter
              children={String(children).replace(/\n$/, '')}
              language={match[1]}
              PreTag="div"
              {...props}
            />
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          )
        },
     
        table(props) { 
          // console.log(props)
          return <table style={ { borderSpacing: '0'  } } { ...props } /> },
        th(props) { 
          let style = props.style
          style.border = '#5599FF 1px solid'
          return <th style={ { border: '#5599FF 1px solid'  } } { ...props } /> },
        td(props) { 
          let style = props.style
          style.border = '#5599FF 1px solid'
          return <th style={ style } { ...props } /> },
        
      }}
    />
    ); 
  }
}